<clr-modal [(clrModalOpen)]="isOpen" *ngIf="apps" [clrModalClosable]="!isRunning">
  <h3 *ngIf="apps?.length == 1" class="modal-title">Confirm Unregister Application</h3>
  <h3 *ngIf="apps?.length > 1" class="modal-title">Confirm Unregister Applications</h3>
  <div class="modal-body" *ngIf="apps.length == 1 && !isRunning">
    This action will unregister and delete application
    <u><strong>{{apps[0].name}}</strong></u>
    of type <span class="{{apps[0].labelTypeClass()}}">{{apps[0].type}}</span>.
    Are you sure?
  </div>
  <div class="modal-body" *ngIf="apps?.length > 1 && !isRunning">
    This action will unregister and delete the <u><strong>{{apps.length}}
    application{{apps?.length > 1 ? 's' : ''}}</strong></u> listed below.<br/>Are you sure?
    <br/>
    <table class="table table-striped">
      <thead>
      <tr>
        <th class="left">Name</th>
        <th class="left">Type</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let app of apps">
        <td class="left"><strong>{{app.name}}</strong></td>
        <td class="left">
          <span class="{{app.labelTypeClass()}}">{{app.type}}</span>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <div class="modal-body" *ngIf="isRunning">
    <clr-spinner clrInline clrSmall></clr-spinner>
    Unregistering application(s) ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" [disabled]="isRunning" (click)="isOpen = false">Cancel</button>
    <button type="button" class="btn btn-primary" (click)="unregister()" [disabled]="isRunning">
      <span *ngIf="apps.length == 1">Unregister the application</span>
      <span *ngIf="apps.length > 1">Unregister the applications</span>
    </button>
  </div>
</clr-modal>
